import React from 'react';
import style from './PlaceOrder.module.css'
import { CheckOutCard, PaymentForm } from '../../components'
import { MainLayout } from '../../layouts/mainLayout'
import { Row, Col } from 'antd'
import { useSelector } from '../../redux/hooks'
import { useDispatch } from 'react-redux'
// import { placeOrder } from '../../redux/order/slice'

export const PlaceOrder: React.FC = (props) => {
  const jwt = useSelector(s => s.user.token)
  const loading = useSelector(s => s.order.loading)
  const order = useSelector(s => s.order.currentOrder)
  const dispatch = useDispatch()
  console.log(order, 'order9999')
  return (
    <MainLayout>
      <Row>
        <Col span={12}>
          <PaymentForm></PaymentForm>
        </Col>
        <Col span={12}>
          <CheckOutCard 
            loading={loading}
            order={order}
            onCheckout={() => {
              dispatch({jwt, orderId: order.id})
            }}
          ></CheckOutCard>
        </Col>
      </Row>
    </MainLayout>
  )
}
